<template>
  <a-modal
    v-model:visible="visible"
    @ok="handleOk"
    centered
    style="min-width: 1000px"
  >
    <a-row>
      <a-breadcrumb>
        <a-breadcrumb-item
          ><a href="#" @click="handleOk" onclick="event.preventDefault()"
            >我的素材</a
          ></a-breadcrumb-item
        >
        <a-breadcrumb-item
          ><a href="#" onclick="event.preventDefault()">{{
            imgInfo.name
          }}</a></a-breadcrumb-item
        >
      </a-breadcrumb>
    </a-row>
    <div class="content">
      <!-- 左边图片、视频视图 -->
      <div class="content-left">
        <!-- 图片类型 -->
        <div class="left-img" v-if="imgInfo.type === 'image'">
          <img :src="imgInfo.url" alt="" />
        </div>
        <!-- 视频类型 -->
        <div class="left-video" v-if="imgInfo.type === 'video'">
          <video :src="imgInfo.url" controls></video>
          <div class="video-oprate">
            <div>
              <span>缩放时间轴</span>
            </div>
            <div>
              <span>入点</span>
              <span>出点</span>
              <span>播放本段</span>
              <span>快捷键</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧图片、视频基本信息 -->
      <div class="content-right">
        <a-tabs v-model:value:activeKey="activeKey">
          <a-tab-pane key="1" tab="基本信息">
            <div style="width: 335px">
              <div class="file-desc">
                <span class="file-desc-lf">标题</span>
                <span class="file-desc-rg">18.1.637af6.jpeg</span>
              </div>
              <div class="file-desc">
                <span class="file-desc-lf">版权类型</span>
                <span class="file-desc-rg">jpeg</span>
              </div>
              <div class="file-desc">
                <span class="file-desc-lf">添加者</span>
                <span class="file-desc-rg">2048手机用户#Qttlev</span>
              </div>
              <div class="file-desc">
                <span class="file-desc-lf">标签</span>
                <span class="file-desc-rg">描述</span>
              </div>
              <div class="file-desc">
                <span class="file-desc-lf">封面</span>
                <span class="file-desc-rg">
                  <img
                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    alt=""
                  />
                  <a-button type="link">下载封面</a-button>
                </span>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="通用信息" force-render>
            <div style="width: 335px">
              <div class="file-desc">
                <span class="file-desc-lf">文件大小</span>
                <span class="file-desc-rg">279.3KB</span>
              </div>
              <div class="file-desc">
                <span class="file-desc-lf">文件格式</span>
                <span class="file-desc-rg">jpeg</span>
              </div>
              <div class="file-desc">
                <span class="file-desc-lf">分辨率</span>
                <span class="file-desc-rg">1632 X 1632</span>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
    <template #footer>
      <a-button key="back" @click="handleOk">返回素材列表</a-button>
      <a-button key="submit" type="primary" @click="handleOk">导入</a-button>
    </template>
  </a-modal>
</template>
<script>
import { defineComponent, toRefs, reactive, computed } from "vue";

export default defineComponent({
  components: {},
  setup() {
    const state = reactive({
      visible: false,
      activeKey: 1,
      imgInfo: {},
    });
    const showModal = (info) => {
      state.imgInfo = info;
      console.log(state.imgInfo.url);
      state.visible = true;
    };
    const handleOk = (e) => {
      state.visible = false;
    };
    return {
      ...toRefs(state),
      showModal,
      handleOk,
    };
  },
});
</script>
<style scoped lang="less">
.content {
  display: flex;
  margin-top: 30px;
  width: 100%;
  // 左边图片
  .left-img {
    flex: 1;
    height: 650px;
    border-right: 1px solid #e5e5e5;
    background: #f4f4f4;
    text-align: center;
    margin-right: 40px;
    padding: 20px;
    img {
      width: 100%;
      height: 582px;
    }
  }
  // 左侧视频视图
  .left-video {
    flex: 1;
    height: 650px;
    text-align: center;
    margin-right: 40px;
    padding: 20px;
    overflow-y: auto; /* 创建垂直滚动效果 */
    video {
      width: 100%;
      height: 632px;
      background: black;
    }
    .video-oprate {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
    }
  }
  // 右侧图片、视频基本信息
  .content-right {
    width: 450px;
    .file-desc {
      height: 60px;
      display: flex;
      .file-desc-lf {
        color: #b7b7b7;
        width: 100px;
      }
      .file-desc-rg {
        display: flex;
        flex-direction: column;
        img {
          width: 200px;
          height: 300px;
        }
      }
      &:nth-child(1) {
        margin-top: 10px;
      }
      &:last-child {
        height: 300px;
      }
    }
  }
}
</style>
